<template>
  <div class="home" ref="homeRef">
    <NavBar>
      <template v-slot:center>
        <div class="title">弘源旅途</div>
      </template>
    </NavBar>
    <div class="banner">
      <img class="images" src="../../assets/img/home/banner.webp" alt="">
    </div>
    <SearchBox></SearchBox>
    <CateGory></CateGory>
    <div class="searchBar" v-if="isShow">
      <SearchBar></SearchBar>
    </div>
    <HomeContent></HomeContent>
  </div>
</template>
<script>
export default {
  name: "home"
}
</script>
<script setup>
import NavBar from './cnp/home-nav-bar.vue'
import SearchBox from './cnp/home-search-box.vue'
import CateGory from './cnp/home-category.vue'
import HomeContent from './cnp/home-content.vue'
import { useHome } from '../../Pinia/modules/home'
import { onMounted, onUnmounted, watch, ref, computed, onActivated } from 'vue'
import { useScroll } from '../../hook/useScroll'
import SearchBar from '../../components/content/search-box.vue'
const homer = useHome();
// window.addEventListener('scroll', () => {我们要防止切换了页面这个还在监听
//   const scrollHeight = document.documentElement.scrollHeight;
//   const scrollTop = document.documentElement.scrollTop;
//   const clientHeight = document.documentElement.clientHeight
//   console.log(document.documentElement.scrollHeight);
//   console.log(document.documentElement.scrollTop);
//   console.log(document.documentElement.clientHeight);
//   if (scrollHeight <= scrollTop + clientHeight) {
//     homer.getHomeList()
//   }
// })
// const scrollListenerHandler = () => {
//   const scrollHeight = document.documentElement.scrollHeight;
//   const scrollTop = document.documentElement.scrollTop;
//   const clientHeight = document.documentElement.clientHeight
//   // console.log(document.documentElement.scrollHeight);
//   // console.log(document.documentElement.scrollTop);
//   // console.log(document.documentElement.clientHeight);
//   if (scrollHeight <= scrollTop + clientHeight) {
//     homer.getHomeList()
//   }
// }
// onMounted(() => {
//   window.addEventListener('scroll', scrollListenerHandler)
// })
// onUnmounted(() => {
//   window.removeEventListener("scroll", scrollListenerHandler)
// })
// useScroll(() => {
//   homer.getHomeList();
// })
// 拿到大盒子记录滚动位置
let homeRef = ref()
//判断是否到底了加载下一页数据
const { flag, scrollTop } = useScroll()
watch(flag, (newX) => {
  if (newX) {
    homer.getHomeList();
    flag.value = false
  }
})
// 判断搜索框的显示隐藏,这里用computed简节点，因为直接作用于页面
// let isShow = ref(false);
// watch(scrollTop, (newVal) => {
//   // console.log(scrollTop.value, newVal);
//   isShow.value = newVal > 100
//   console.log(newVal);
// })
const isShow = computed(() => {
  return scrollTop.value > 360;

})
// 跳转回home时, 保留原来的位置
onActivated(() => {
  homeRef.value.scrollTo({
    top: scrollTop.value
  })
})
</script>
<style scoped>
.images {
  width: 100%;
}

.title {
  color: #ff9854;
  font-size: 16px;
  font-weight: 600;
}

.searchBar {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
}
</style>